<template>
<div>
  <my-header></my-header>
  <section class="container">
     <a @click="turnBack" class="back">返回</a>
    <div id="myChart" :style="{width: 'auto', height: '300px'}"></div>
  </section>
  <my-footer></my-footer>
</div>
</template>

<script>
  import { mergeSort } from '../util/index'
  import Footer from '../components/layouts/Footer'
  import Header from '../components/layouts/Header'
  import {
    getAreaList,
    getAreaHouseList,
    getDetailList
  } from '../serverApi/area'

  export default {
    name: 'hello',
    data() {
      return {
        xAxis: [], //x轴的数据
        rate: [], //y轴的数据
        AreaHouse: [], //全部数据
        myChart:'', //chart
        _id:[],
        detail:[]
      }
    },
    created() {
    this.getAreaHouse()
    },
    mounted() {
    /**
    *基于准备好的dom，初始化echarts实例
    */
      this.myChart = this.$echarts.init(document.getElementById('myChart'))
      this.clickBar()
    },
    methods: {
      /**
      * 返回逻辑
       */
      turnBack(){
        this.formateData(this.AreaHouse);
        this.drawLine()
      },
      /**
      * 点击bar的交互
       */
      clickBar(){
        let that = this
        this.myChart.on('click',function(params){
          let _id = that._id[Math.max(params.dataIndex)];
          that.getDetail({param:{_id}})
        })
      },
      /**
       *获取小区域内房价
       */
      async getDetail({param}){
        await getDetailList(param).then((data)=>{
            if(data.code === 0){
            this.detail = data.area.areaDetail;
            this.formateData(this.detail);
            this.drawLine()
          }
        })
        
      },
      /**
       *获取大区域的房价
       */
      async getAreaHouse(){
        await getAreaHouseList().then((data)=>{
          if(data.code === 0){
            this.AreaHouse = data.areaHouse;
            this.formateData(this.AreaHouse);
            this.drawLine()
          }
        })
        
      },
      /**
      * 数据处理，对数据里的价格排序
       */
      formateData(data) {
        let textAry = [],_id=[],rate=[];
        for (let i = 0; i < data.length; i++) {
          textAry.push(data[i]['text'])
          _id.push(data[i]['_id'])
          let sortAry = mergeSort(data[i]['house'])
          data[i]['house'] = sortAry
          rate.push(sortAry[0]['aroundPrice'])
        }
        this.xAxis = textAry
        this._id = _id
        this.rate = rate
      },
      drawLine() {
      /** 
      * 绘制图表
      */
        let dataShadow = [];
        let yMax = 500;
        for (let i = 0; i < this.rate.length; i++) {
            dataShadow.push(yMax);
        }
        const option = {
          title: { text: '杭州个城区最低房价' },
          tooltip: {},
          xAxis: [{
            type: 'category',
            data: this.xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [
            { 
              type: 'bar',
              itemStyle: {
                  normal: {color: 'rgba(0,0,0,0.05)'}
              },
              barGap:'-100%',
              barCategoryGap:'40%',
              data: dataShadow,
              animation: false
            },
            {
              name: '价格',
              type: 'bar',
              itemStyle: {
                normal: {
                    color: new  this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new  this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
              data: this.rate
            },
          ]
        }
        this.myChart.setOption(option)
      }
    },
    components:{
      'my-footer': Footer,
      'my-header': Header
    }
  }
</script>

<style lang='css'>
  .back{
    position: absolute;
    left: 50%;
    top: 110px;
    cursor: pointer;
  }
  .container{
    padding:100px;
  }
</style>
